<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./static/static/vue.min.js"></script>
  <script src="./static/static/axios.min.js"></script>
  <!-- 本地引入lib-master -->
  <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
  <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <div id='app'>
    <h1>订单详情</h1>
    <el-form :model="dataForm" ref="dataForm" label-width="80px">
      <!-- <el-form-item label="用户id" prop="userId">
        <el-input v-model="dataForm.userId" placeholder="用户id"></el-input>
      </el-form-item> -->
      <!-- <el-form-item label="商品id" prop="goodsId">
        <el-input v-model="dataForm.goodsId" placeholder="商品id"></el-input>
      </el-form-item> -->
      <el-form-item label="收获地址" prop="deliveryAddrId">
        <el-input v-model="dataForm.deliveryAddrId" placeholder="收获地址id" disabled></el-input>
      </el-form-item>
      <el-form-item label="商品名称" prop="goodsName">
        <el-input v-model="dataForm.goodsName" placeholder="冗余过来的商品名称" disabled></el-input>
      </el-form-item>
      <el-form-item label="商品数量" prop="goodsCount">
        <el-input v-model="dataForm.goodsCount" placeholder="商品数量" disabled></el-input>
      </el-form-item>
      <el-form-item label="商品单价" prop="goodsPrice">
        <el-input v-model="dataForm.goodsPrice" placeholder="商品单价" disabled></el-input>
      </el-form-item>
      <el-form-item label="客户端：" prop="goodsChannel">
        <span v-if="dataForm.goodsChannel==1">pc</span>
        <span v-if="dataForm.goodsChannel==2">android</span>
        <span v-if="dataForm.goodsChannel==3">ios</span>
      </el-form-item>
      <el-form-item label="订单状态" prop="status">
        <span v-if="dataForm.status==0">未支付</span>
      </el-form-item>
      <el-form-item label="订单创建时间" prop="createDate">
        <el-input v-model="dataForm.createDate" placeholder="订单创建时间" disabled></el-input>
      </el-form-item>
      <el-form-item label="支付时间" prop="payDate">
        <el-input v-model="dataForm.payDate" placeholder="支付时间" disabled></el-input>
      </el-form-item>
      <!-- <el-form-item label="活动id" prop="activityId">
        <el-input v-model="dataForm.activityId" placeholder="活动id"></el-input>
      </el-form-item> -->
    </el-form>
    <el-button type="primary" @click="goMyLog">去结算</el-button>
  </div>

  <script>
    new Vue({
      el: '#app',
      data () {
        return {
          baseUrl: 'http://localhost:8888/api',
          token: localStorage.getItem("token"),
          orderId: localStorage.getItem("orderId"),
          dataForm: {
            id: 0,
            userId: '',
            goodsId: '',
            deliveryAddrId: '',
            goodsName: '',
            goodsCount: '',
            goodsPrice: '',
            goodsChannel: '',
            status: '',
            createDate: '',
            payDate: '',
            activityId: ''
          }
        }
      },
      watch: {

      },
      created () {
        this.getByOrder();
      },
      //方法集合
      methods: {
        goMyLog () {
          location = `http://localhost:7000/activity/actWeb/alipay?orderId=${this.dataForm.id}`
        },
        getByOrder () {
          axios.get(`${this.baseUrl}/activity/orderinfo/info/${localStorage.getItem("goodsid")}`, {
            headers: {
              token: this.token
            }
          }).then(({ data }) => {
            if (data.code == 0) {
              this.dataForm = data.orderInfo
            }
          })
        }
      },
    })
  </script>
</body>

</html>